<template>
  <a-card :bordered="false" :bodyStyle="{ minHeight: `${layoutContentHeight - pageHeaderHeight}px` }">
    <div>
      <span>{{ $t('platformManagement.log.account') }}：</span>
      <a-input allowClear style="width: 200px" class="search-btn" v-model.trim="queryParams.loginName" />
      <a-button class="search-btn" type="primary" icon="search" @click="$refs.table.refresh(true)">{{
        $t('common.query')
      }}</a-button>
      <a-button class="search-btn" icon="reload" @click="resetQuery">{{ $t('common.reset') }}</a-button>
    </div>
    <s-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columns"
      :scroll="{ x: tableWidth }"
      :data="loadData"
      :showPagination="true"
    >
      <span slot="index" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
      <span slot="loginTime" slot-scope="text, record">
        {{ record.loginTime | moment }}
      </span>
    </s-table>
  </a-card>
</template>

<script>
import { layoutMixin } from '@/utils/mixin';
import { STable } from '@/components';
import { getLoginInfoList } from '@/api/platformManagement/LoginInfoController';
import { getQueryParams } from '@/utils/util';

const initialqueryParams = {
  loginName: ''
};

const BUSINESSTYPEENUM = ['其它', '新增', '修改', '删除', '授权', '导出', '导入', '强退', '生成代码', '清空'];

export default {
  name: 'LoginLog',
  mixins: [layoutMixin],
  components: {
    STable
  },
  data() {
    return {
      initFlag: true,
      pageParams: {},
      queryParams: { ...initialqueryParams },
      BUSINESSTYPEENUM,
      // 加载数据方法 必须为 Promise 对象
      loadData: params => {
        this.loading = true;
        const req = {
          pageNo: this.initFlag ? this.pageParams.pageNo || 1 : params.pageNo,
          pageSize: this.initFlag ? this.pageParams.pageSize || 10 : params.pageSize,
          ...this.queryParams
        };

        return getLoginInfoList(req)
          .then(res => {
            this.$router.push({
              ...this.$route,
              query: {
                ...params,
                ...getQueryParams(this.queryParams)
              }
            });
            this.initFlag = false;
            return res.data;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      loading: true
    };
  },
  filters: {},
  computed: {
    columns() {
      return [
        {
          title: this.$t('common.index'),
          dataIndex: 'index',
          fixed: 'left',
          align: 'center',
          width: 80,
          scopedSlots: { customRender: 'index' }
        },
        {
          title: this.$t('platformManagement.log.operationUser'),
          dataIndex: 'loginName',
          ellipsis: true,
          width: 150
        },
        {
          title: 'IP',
          dataIndex: 'ipaddr',
          ellipsis: true,
          width: 150
        },
        {
          title: this.$t('platformManagement.log.browser'),
          dataIndex: 'browser',
          ellipsis: true,
          width: 150
        },
        {
          title: this.$t('platformManagement.log.os'),
          dataIndex: 'os',
          ellipsis: true,
          width: 150
        },
        {
          title: this.$t('platformManagement.log.operationType'),
          dataIndex: 'msg',
          ellipsis: true,
          width: 200
        },
        {
          title: this.$t('platformManagement.log.loginTime'),
          dataIndex: 'loginTime',
          width: 200,
          scopedSlots: { customRender: 'loginTime' }
        }
      ];
    },

    tableWidth() {
      const width = this.columns.reduce((last, next) => {
        last += next.width;
        return last;
      }, 0);
      return width;
    }
  },
  created() {
    const { pageNo, pageSize } = this.$route.query;
    this.pageParams = {
      pageNo,
      pageSize
    };
  },
  methods: {
    resetQuery() {
      this.queryParams = { ...initialqueryParams };
      this.$refs.table.refresh(true);
    }
  }
};
</script>

<style lang="less" scoped>
.jsonTitle {
  text-align: center;
  margin: 8px 0;
}
</style>
